<!--<link rel="stylesheet" href="../assets/icon/iconfont.css">-->
<template>
  <div class="MyReportdetails">
    <!-- 头部 -->
    <div class="top">
      <van-icon name="arrow-left"/>
      <span class="top-text">我的报告</span>
      <div class="share" style="float: right;" @click="share">分享</div>
    </div>
    <!-- 内容 -->
    <div class="body">
      <div class="body-top">
        <p style="text-align:center;margin-top: 10px">健康指数</p>
        <p style="text-align:center;">87</p>
        <div style="text-align: center">
          <van-button plain type="primary" class="body-btn">查看全部项目</van-button>
        </div>
        <p style="text-align:center;">您的健康指数为87分，比80%的人更健康</p>
      </div>
      <van-cell-group>
        <van-cell title="历史对比" style="background: rgba(228, 228, 228, 1);margin-top: 2px"/>
        <van-cell title="身高" value="160.5cm"/>
        <van-cell title="体重指数BMI" value="18.3"/>
        <van-cell title="收缩压" value="96mmHg"/>
        <!-- 下拉折叠 -->
        <div v-show="isShow">
          <van-cell title="血小板" value="103.00*10^9/L"/>
          <van-cell title="舒张压" value="66mmHg"/>
        </div>
        <div style="margin: 10px auto">
          <p id="fold" @click="unfold">{{ isItem }}</p>
        </div>
      </van-cell-group>
      <van-cell-group>
        <van-cell title="异常指标" style="background: rgba(228, 228, 228, 1);"/>
        <van-cell title="血小板" value="↓103.00*10^9/L"/>
      </van-cell-group>
      <van-cell-group>
        <van-cell title="综述" style="background: rgba(228, 228, 228, 1);"/>
        <van-cell title="终检结论"/>
        <p style="margin-left: 10px">1.血液常规提示：血小板值偏低[103.00*10^9/L]。建议内科复查随访</p>
        <van-divider/>
        <van-cell title="医疗保健"/>
        <p style="margin-left: 10px">1.血小板减少：<br>
          血小板是血液基本成分之一，参与止血和血栓形成，血小板计数是每单位容积周围血液中血小板的数量，低于100*10（9次方）/L为血小板计数减少。清晨、女性月经前可呈一过性减少，一般无临床意义。病理性减少见于原发性血小板减少性紫癜、再生障碍性贫血、放射性损伤、某些药物反应、脾功能亢进等。<br>
          建议您复查血常规、内科随访。</p>
      </van-cell-group>
    </div>
    <!-- 底部 -->
    <div class="buttom">
      <div class="buttom-left">咨询医生</div>
      <div class="buttom-right">快速挂号</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyReportdetails',
  data() {
    return {
      isShow: false,
      isItem: '显示更多v',
    }
  },
  methods: {
    share() {
      console.log('分享');
    },
    unfold() {
      if (this.isShow) {
        this.isItem = '显示更多v'
        this.isShow = false
      } else {
        this.isItem = '收起^'
        this.isShow = true
      }
    }
  },
}
</script>
<style src="../assets/reset.css"></style>
<style lang="scss">
.MyReportdetails {
  .top {
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  #fold {
    text-align: center;
    cursor: pointer;
    color: #00CCCC;
  }

  .top-text {
    margin: 0 auto;
  }

  .body-top {
    background-image: url('../assets/bagimg.png');
  }

  .body-btn {
    display: block;
    margin: 0 auto;
  }

  .buttom {
    width: 320px;
    height: 40px;
    display: flex;
  }

  .buttom-left {
    border-top: 1px solid #00CCCC;
    width: 160px;
    height: 40px;
    color: #00CCCC;
    text-align: center;
    padding-top: 20px;
    cursor: pointer;
  }

  .buttom-right {
    width: 160px;
    height: 40px;
    color: #fff;
    text-align: center;
    padding-top: 20px;
    background: #00CCCC;
    cursor: pointer;
  }

}
</style>

